<template>
	<div>
		<p class="header">资料设置</p>
		<div class="line"></div>
		<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" size="medium"
			status-icon>
			<el-form-item label="昵称" prop="username">
				<el-input v-model="addForm.username"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="gender">
				<el-radio-group v-model="addForm.gender">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="生日" required>
				<el-form-item prop="date">
					<el-date-picker type="date" placeholder="请选择日期" v-model="addForm.date" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
			</el-form-item>
			<el-form-item label="身高/cm" prop="height">
				<el-input v-model.number="addForm.height"></el-input>
			</el-form-item>
			<el-form-item label="体重/斤" prop="weight">
				<el-input v-model.number="addForm.weight"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('addFormRef')">保存</el-button>
				<el-button @click="resetForm('addFormRef')">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button v-show="''" :plain="true" @click="open" ref="success">成功</el-button>
	</div>
</template>

<script>
export default {
  data () {
    return {
      // 添加用户资料表单数据
      addForm: {
        username: '',
        gender: '',
        date: '',
        weight: '',
        height: ''
      },
      // 添加用户表单验证规则
      addFormRules: {
        username: [{
          required: true,
          message: '请输入昵称',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 10,
          message: '长度在 2 到 10 个字符',
          trigger: 'blur'
        }
        ],
        gender: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        date: [{
          required: true,
          message: '请选择出生日期',
          trigger: 'change'
        }],
        height: [{
          required: true,
          message: '请输入身高',
          trigger: 'blur'
        },
        {
          type: 'number',
          message: '身高必须为数字值'
        }
          //     {
		  // min: 2,
		  // max: 3,
		  // message: '身高应该在 10cm 到 260cm 之间',
		  // trigger: 'blur'
          //     }
        ],
        weight: [{
          required: true,
          message: '请输入体重',
          trigger: 'blur'
        },
        {
          type: 'number',
          message: '体重必须为数字值'
        }
          //     {
		  // min: 5,
		  // max: 400,
		  // message: '体重应该在 5斤 到 400斤 之间',
		  // trigger: 'blur'
          //     }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          localStorage.setItem('userinfo', JSON.stringify(this.addForm))
		  //  保存成功，默认点击了一次成功按钮
		  this.$refs.success.$el.click()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    open () {
	        this.$message({
	          message: '保存成功',
	          type: 'success'
	        })
	      }
  },
  created () {
	  var addfrom = JSON.parse(localStorage.getItem('userinfo'))
	  if (addfrom) {
		  this.addForm = addfrom
	  }
  }
}
</script>

<style scoped>
	.header{
		padding: 0.125rem ;
		border-bottom: 1px solid #ccc;
	}
	.el-form {
		width: 2.5rem;
		padding-right: 0.3125rem;
		margin-top: 0.25rem;
		margin-left: 0.1875rem;
	}

	.el-form .el-form-item .el-form-item__label {
		font-size: 0.25rem;
	}
</style>
